<template>
  <div class="container">

    <div class="form">

      <el-row type="flex" justify="center">
        <el-col class="sys_title">颐养中心后台管理系统</el-col>
      </el-row>

      <el-row class="forminput">
        <el-input placeholder="请输入用户名" v-model="form.username"/>
      </el-row>

      <el-row class="forminput">
        <el-input placeholder="请输入密码" v-model="form.password" type="password" show-password/>
      </el-row>
      <el-row class="forminput">
        <el-button type="primary" class="btnLogin" @click="toLogin">登录</el-button>
      </el-row>
    </div>
  </div>

</template>

<script setup name="Login">
import {reactive} from 'vue';
import {login} from '@/api/permission/login';
import {useRouter} from 'vue-router';
import {setToken} from '@/utils/auth'

const router = useRouter();


const form = reactive({
  username: '',
  password: ''
})


//用于登录
function toLogin() {
  login(form).then(token => {
    if (token) {
      setToken(token);
      router.replace("/")
    }
  })
}


</script>

<style>
/*  容器 样式 */
.container {
  background-color: aliceblue;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

}

/* 表单 */
.form {
  width: 400px;
  height: 300px;

  background-color: #FFFFFF;
  border-radius: 6px;
  padding-top: 20px;


}

.sys_title {

  font-size: 1.3em;
  text-align: center;
}


.forminput {
  height: 40px;
  margin: 30px 10px;


}

.btnLogin {
  width: 100%;
}
</style>
